<template>
	<view class="page-main">
		<view class="login-big-header">
			<view class="device-status_bar"></view>
			<!--      <view @tap="uniGoTab('/personalCenter')" class="white-back-button" style="  background-image: url('../static/client/whiteBack.png');-->
			<!--			">-->
			<!--      </view>-->
		</view>
		<view class="zt loginTitle">
			<p>用户登录</p>
			<view class="loginLine"></view>
		</view>
		<view class="login-wrapper">
			<view class="row">
				<view class="field-name">+86</view>
				<view class="right-part">
					<view class="uni-input-wrapper">
						<input placeholder-style="font-size:14px;
						color: #bdc4ce;" maxlength="11" class="uni-input" placeholder="请输入手机号" v-model="aForm.phone" />
					</view>
				</view>
			</view>
			<view class="row">
				<view class="field-name">密码</view>
				<view class="right-part">
					<view class="uni-input-wrapper">
						<input placeholder-style="font-size:14px;
						color: #bdc4ce;" password class="uni-input" placeholder="请输入密码" v-model="aForm.password" />
					</view>
				</view>
			</view>
			<view class="row">
				<view class="field-name">验证码</view>
				<view class="right-part">
					<view class="uni-input-wrapper">
						<input v-model="aForm.code" placeholder-style="font-size:14px;color: #bdc4ce;" maxlength="15"
							class="uni-input" style="width: 38vw" placeholder="请输入验证码" />
						<view class="loginContentBut" :class="noSend ? '' : 'active-effect'"
							style="position: relative; top: 0px" @click="getVerifyCode('/login', '/api/captcha')">
							获取验证码{{ seconds }}</view>
					</view>
				</view>
			</view>
		</view>

		<!--    <view class="agree-license">-->
		<!--      <view style="flex-grow: 1; display: flex; align-items: center">-->
		<!--        &lt;!&ndash;        <checkbox-group @change="handleClick()">&ndash;&gt;-->
		<!--        &lt;!&ndash;          <label class="radio-label ">&ndash;&gt;-->
		<!--        &lt;!&ndash;            <checkbox style="transform:scale(0.6)" class="radio" :checked="protocolAgreed"/>&ndash;&gt;-->
		<!--        &lt;!&ndash;          </label>&ndash;&gt;-->
		<!--        &lt;!&ndash;        </checkbox-group>&ndash;&gt;-->
		<!--        &lt;!&ndash;        <protocol></protocol>&ndash;&gt;-->
		<!--      </view>-->
		<!--    </view>-->

		<view class="blue-wide-button" @tap="login">立即登录</view>
	</view>
</template>

<script>
	import {
		appMixin
	} from '../../util/reuse';
	import {
		TOAST_DURATION,
		uniShowToast,
		get_uuid,
		clearUserInfo
	} from '../../util/misc';
	import {
		uniReLaunch,
		uniSetStorageSync,
		uniSetToken,
		uniSetUser,
		uniSetUserRight, //二期新增权限配置
	} from '../../util/funcs';
	import {
		chatMixin
	} from '../../util/reuse/chatMixin';
	import {
		failCbObject,
		uniHideLoading,
		uniShowLoading
	} from '../../util/commonFuncs';

	import protocol from './protocol';
	import {
		loginMixin
	} from './loginMixin';
	export default {
		mixins: [appMixin, chatMixin, loginMixin],
		components: {
			protocol
		},
		data() {
			return {
				protocolAgreed: true,
				index: 1,
			};
		},
		methods: {
			login() {
				if (this.requesting) {
					uni.showToast({
						title: '正在登录中，请勿重复点击',
						position: 'top',
						icon: 'none',
						duration: TOAST_DURATION,
					});
					return;
				}

				this.requesting = true;
				// 手机号正则
				let str = /^\d{11}$/;
				if (str.test(this.aForm.phone) && this.aForm.password) {
					delete this.aForm.passwordAgain;
					// console.log('requesting', this.aForm);
					// return;
					uniShowLoading()
					let uuid = get_uuid()
					uniSetStorageSync('uuid', uuid)
					console.log("this.aForm",uuid)
					console.log("http",`${this.$http}/api/merchant/login`)
					uni.request({
						url: `${this.$http}/api/merchant/login`,
						method: 'POST',
						data: {
							...this.aForm,
							uuid: uuid,
						},
						success: (res) => {
							uniHideLoading()
							this.requesting = false;
							console.log('req result: ', res);
							if (res.data.code === 200) {
								uniShowToast(res.data.msg, true);
								uniSetUser(this, res.data.user_info);
								uniSetToken(this, res.data.token);
								uniSetUserRight(res.data.user_info.id,res.data.user_info.auth_type);
								setTimeout(() => {
									uniReLaunch('/personalCenter', () => {
										this.requesting = false;
										// 登陆后都是用这个来进行初始化
										this.chatContextInitialize();
										// uni.$emit('appInitialize');
									});
								}, TOAST_DURATION);
							} else {
								uni.showToast({
									title: res.data.msg,
									position: 'bottom',
									icon: 'none',
									duration: TOAST_DURATION,
								});
							}
						},
						...failCbObject('', () => {
							this.requesting = false;
						}),
					});
				} else {
					this.requesting = false;
					if (!this.aForm.password) {
						uni.showToast({
							title: '请输入密码',
							position: 'top',
							icon: 'none',
							duration: TOAST_DURATION,
						});
					} else if (!str.test(this.aForm.phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							position: 'top',
							icon: 'none',
							duration: TOAST_DURATION,
						});
					}
				}
			},
			handleClick() {
				this.protocolAgreed = !this.protocolAgreed;
			},
			change(num) {
				this.index = num;
			},
			go(url) {
				uni.navigateTo({
					url: url,
				});
			},
			uniBack() {
				uni.navigateBack();
			},
		},
		onLoad(option) {
			clearUserInfo(this)
			//option为object类型，会序列化上个页面传递的参数
			if (option.index) {
				this.index = option.index;
			}
		},
		onShow() {},
	};
</script>

<style lang="scss" scoped>
	@import '../../assets/styles/global';

	.page-main {
		.login-big-header {
			width: 750rpx;
			height: 486rpx;
			position: relative;
			background-image: url('../../static/images/login/bgImg.png');
			@include cover-no-repeat-center;
		}

		.blue-wide-button {
			width: 604rpx;
			margin: 108rpx auto;
		}

		.login-wrapper {
			margin: 30px;
			font-size: 14px;

			.row {
				display: flex;
				height: 100rpx;
				line-height: 50px;
				border-bottom: 2rpx solid $greyBorderColor;

				.field-name {
					width: 100rpx;
					position: relative;

					&:after {
						content: '';
						height: 30rpx;
						border-right: 2rpx solid $greyBorderColor;
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -20rpx;
					}
				}

				.right-part {
					.uni-input-wrapper {
						width: 66vw;
						padding: 0 30rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;

						.uni-input {
							/*background-color: yellow;*/
							width: 100%;
							font-size: 28rpx;
							color: #454a50;
						}
					}
				}
			}
		}

		.agree-license {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding: 0 50rpx;

			.radio {
				/*width: 28rpx;*/
				/*height: 28rpx;*/
			}
		}
	}

	.login3 {
		font-size: 12px;
		padding: 0 15px;
	}

	.loginTitle {
		position: absolute;
		top: 50px;

		p {
			margin: 30px;
			color: #ffffff;
			font-size: 34px;
		}

		.loginLine {
			margin: 30px;
			width: 50px;
			border-bottom: 1px solid #d8d8d8;
		}
	}

	.loginContentLine {
		border-left: 1px solid #d8d8d8;
		height: 12px !important;
		line-height: 50px;
		margin: 0 10px;
		position: relative;
		top: 18px;
	}

	.loginContentBut {
		width: 200rpx;
		height: 30px !important;
		line-height: 30px !important;
		border-radius: 5px;
		background-color: #ebedf0;
		color: #969799;
		text-align: center;
		position: relative;
		top: 9px;
		font-size: 12px;

	}
</style>
